<template>
    <div class="border p-2">
        拖拽起点：
        <div class="p-2 m-2 border-2" v-for="item in data1" :key="item.text" v-drag="{
            clone: true,
            createid: true,
            element: item,
            name: 'leftcom'
        }">
            {{ item.text }}
        </div>
    </div>
    <div>
        放置区：
        <div class="min-h-72 w-96 border p-2" v-drop="{
            children: data2,
            allow: ['leftcom', 'maincom'],
            onAdd: onDropAdd,
            onMove: onDropMove,

        }">
            <div v-for="item in data2" :key="item.id" v-drag="{
                element: item,
                brother: data2,
                name: 'maincom'
            }">
                <input class="border" v-if="item.component == 'input'" />
                <select class="border" v-if="item.component == 'select'">
                    <option>选项1</option>
                    <option>选项2</option>
                </select>
                <table class="border w-full table-fixed" v-if="item.component == 'table'">
                    <tr v-for="(_, r) in 3">
                        <td class="h-[32px] border" v-for="(_, c) in 2" v-drop="{
                            limit: 1,
                            children: item.children[r * 2 + c],
                            allow: ['leftcom', 'maincom'],
                            onAdd: onDropAdd,
                            onMove: onDropMove
                        }">
                            <div v-for="child in item.children[r * 2 + c]" v-drag="{
                                element: child,
                                brother: item.children[r * 2 + c],
                                name: 'maincom'
                            }">
                                <input class="border" v-if="child.component == 'input'" />
                                <select class="border" v-if="child.component == 'select'">
                                    <option>选项1</option>
                                    <option>选项2</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div>

    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
interface EleType {
    [key: string]: any;
}

const data1 = reactive([
    {
        component: 'input',
        text: '输入框'
    },
    {
        component: 'select',
        text: '下拉框'
    },
    {
        component: 'table',
        text: '布局容器',
        rows: 3,
        cols: 2,
        children: []
    },
])

const data2 = reactive<EleType[]>([])

function onDropAdd(element, brother, index) {
    if (element.component == 'table') {
        element.children = Array.from(Array(element.rows * element.cols), () => [])
    }
}
function onDropMove(element, brother, index) {

}
</script>